<template>
	<view class="page">
		<view class="inp">
			<u-input v-model="value" fontSize="12" border="surround" placeholder="请输入">
			<template slot="prefix">
				<u-icon name="search" color="#9e9e9e" size="24"></u-icon>
			</template>
			</u-input>
			<view style="width: 120rpx; text-align: center;">搜索</view>
		</view>
		<view class="top">
			<view class="top-name" @click="show = true">
				<view>近半年</view>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<u-line length="12" direction="col"></u-line>
			<view class="top-name">
				<view>费用高低</view>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<u-line length="12" direction="col"></u-line>
			<view class="top-name">
				<view>维修状态</view>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<u-line length="12" direction="col"></u-line>
			<view class="top-name">
				<view>筛选</view>
				<u-icon name="arrow-down"></u-icon>
			</view>
		</view>
		<view style="font-size: 24rpx; margin: 20rpx;">共<text style="color:#257CFF">99</text>条数据</view>

		<view class="content">
			<view class="order-top">
				<view class="le">
					订单编号：121241242132
				</view>
				<view class="re">维修中</view>
			</view>
			<u-line color="#ececec"></u-line>
			<view class="order">
				<!-- <image class="img" src="../../../static/20230328061106_d73a2.jpg"></image> -->
				<view class="content1">
					<view class="content-name">湘A·123456</view>
					<view class="content-map">维修服务名称维修服务名称维修服务名称维修</view>
					<view class="content-time">2023.11.30日 14:10</view>
				</view>
			</view>
			<u-line color="#ececec"></u-line>
			<view class="but">
				<view class="button" @click="$goBack(2,'/bundle/pages/repairdetails/repairdetails')">查看详情</view>
				<view style="font-weight: 600;" >订单金额：<text style="color: red;">¥816</text></view>
			</view>
	</view>
		<u-action-sheet  :actions="list" @select="selectClick" :show="show"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '选项一'
					},
					{
						name: '选项二'
					}
				],
				show: false
			}
		},
		methods: {
			selectClick(e) {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.inp{
		box-sizing: border-box;
		padding:20rpx;
		background-color: #fff;
		@include flex(row,space-between,center)
		font-size: 30rpx;
	}
.top{
	padding: 20rpx;
	height: 84rpx;
	font-size: 28rpx;
	background-color: #fff;
	text-align: center;
	@include flex(row,space-between,center)
	.top-name{
		
		display: flex;
	}
}
.content{
	width:718rpx;
	height: 340rpx;
	margin: 16rpx;
	padding: 26rpx 20rpx;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 20rpx;
.order-top{
	margin-bottom: 10rpx;
	font-weight: 600;
	@include flex(row,space-between,center)
	.le{

		font-size: 28rpx;
	}
	.re{
		font-size: 28rpx;
		color: #257CFF;
	}
	
}
.order{
	margin: 20rpx 10rpx;
		display: flex;
	.img{
		border-radius: 10rpx;
		width: 160rpx;
		height: 160rpx;
	}
	.content1{
		width: 440rpx;
		margin-left: 20rpx;
		line-height: 40rpx;
		.content-name{
			font-size: 28rpx;
			font-weight: 600;
		}
		.content-time{
			font-size: 24rpx;
			color:#949494 ;
		}
		.content-map{
			font-size: 28rpx;
		}
	}
}
.store{
	font-size: 26rpx;
	margin: 8rpx 0rpx;
}
.order-content{
	width: 666rpx;
	font-size: 24rpx;
	color:#666666 ;
	margin-bottom:6rpx;
}
.time{
	margin-bottom:8rpx;
	color: #949494;
	font-size: 24rpx;
}
.but{
	margin-top: 16rpx;
	font-size: 28rpx;
	@include flex(row,space-between,center)
	.button{
		color:#257CFF;
		}
}
}
::v-deep .u-transition{
	// position: absolute !important; 
	top:120rpx !important;
}
	::v-deep .u-input {
		margin: 0rpx 40rpx 0rpx 32rpx;
		background-color: #efefef !important;
		
	}
</style>
